import React, {Ref, useEffect} from "react";
import {withResizeDetector} from 'react-resize-detector';
import styles from './index.module.scss';
interface IProps {
  width: number,
  height: number,
  targetRef: Ref<any>,
  onResize?(width: number, height: number): Function
}
/**
 *
 * @constructor
 */
function ResizeBox({width, height, targetRef, onResize}:IProps) {

  useEffect(() => {
    typeof onResize === 'function' && onResize(width, height);
  }, [width, height])

  useEffect(() => {
    try {
      typeof onResize === 'function' && onResize(targetRef.current.offsetWidth, targetRef.current.offsetHeight);
    }catch (e) {

    }
  }, [])

  return <div className={styles.resizeBox} ref={targetRef}/>
}

export default withResizeDetector(ResizeBox, {
  refreshMode: 'debounce', // 使用防抖
  refreshRate: 300, // 更新频率
  skipOnMount: true
});
